<template>
  <div class="box-full flex-col bgfff box-border overflow-hidden">
    <div class="flex flex-a-c flex-j-b w-full mb-20 pt-20">
      <a-input-search allow-clear size="small" placeholder="输入群名称检索" v-model="searchValue" />
    </div>
    <div class="w-full flex-1 m-relative">
      <a-radio-group class="m-absolute t-0 b-0 r-0 l-0 overflow-hidden" v-model="selectedId">
        <a-table
          :columns="columns"
          :data="tableData"
          :show-header="false"
          row-key="wxid"
          :bordered="false"
          :loading="loading"
          :pagination="false"
          :scroll="{ y: 330 }"
        >
          <template #groupInfo="{ rowIndex, record }">
            <div class="flex flex-a-c">
              <!-- <div class="w-30 mr-6 flex flex-j-c">{{ rowIndex + 1 }}</div> -->
              <a-image
                width="42"
                height="42"
                class="mx-4"
                :preview="false"
                style="border-radius: 4px"
                :src="record.avatar"
              />
              <span class="ml-6">{{ record.nickname }}</span>
            </div>
          </template>
          <template #compere="{ record }">
            <div v-if="compere.length && record.wxid === selectedId">
              <span class="text-theme">跟：</span>
              <template v-for="(item, index) in compere" :key="item.wxid">
                <span class="text666">{{ item.nickname }}</span>
                <a-divider direction="vertical" v-if="index != compere.length - 1" />
              </template>
            </div>
          </template>
          <template #action="{ record }">
            <div class="flex flex-a-c flex-j-e" @click="handleOpenMemberModal(record)">
              <a-radio
                :value="record.wxid"
                :disabled="
                  record.wxid === currentGroup?.wxid || disabledGroup?.includes(record.wxid)
                "
              >
                <template #radio="{ checked }">
                  <a-space
                    align="start"
                    class="custom-radio-card"
                    :class="{ 'custom-radio-card-checked': checked }"
                  >
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot" />
                    </div>
                    <div>
                      <div className="custom-radio-card-title">选择</div>
                    </div>
                  </a-space>
                </template>
              </a-radio>
            </div>
          </template>
        </a-table>
      </a-radio-group>
    </div>
    <member-modal
      ref="memberModalRef"
      @handleRegression="handleRegression"
      @handleChooseMember="handleChooseMember"
    ></member-modal>
  </div>
</template>
<script setup>
import MemberModal from './memberModal.vue'
import $bus from '@renderer/common/js/bus'
const emit = defineEmits(['handleSource'])
const props = defineProps(['personalGroupList', 'currentGroup', 'disabledGroup'])
const loading = ref(false)
const memberModalRef = ref()
const searchValue = ref()
const tableDataO = reactive([])
const lastSelectedId = ref()
const selectedId = ref()
const shouldUpdate = ref(true)
const compere = ref([])
const columns = [
  {
    title: '群信息',
    slotName: 'groupInfo',
    width: 100
  },
  {
    title: '主持人',
    slotName: 'compere',
    width: 120
  },
  {
    title: '操作',
    slotName: 'action',
    width: 50
  }
]

const tableData = computed(() => {
  if (searchValue.value) {
    return tableDataO.filter((item) => item.nickname.includes(searchValue.value))
  } else {
    return tableDataO.slice() // 使用 slice() 创建 tableDataO 的浅拷贝
  }
})

// 监听单选框改变，记录上一次的值
watch(
  () => selectedId.value,
  (val, oldVal) => {
    if (shouldUpdate.value) {
      lastSelectedId.value = oldVal
    } else shouldUpdate.value = true
  }
)

// 打开群成员后没有选择人时，恢复上一次的值
const handleRegression = () => {
  selectedId.value = lastSelectedId.value
  shouldUpdate.value = false
}

// 打开群成员后选择人时，通知父组件
const handleChooseMember = (result) => {
  compere.value = result
  const item = tableData.value.find((item) => item.wxid == selectedId.value)
  const res = {
    ...item,
    compere: compere.value
  }
  emit('handleSource', res)
}
tableDataO.splice(0, tableDataO.length, ...props.personalGroupList)
// 源头选择回显
const handleEcho = (item) => {
  if (item) {
    shouldUpdate.value = false
    selectedId.value = item.wxid
    lastSelectedId.value = item.wxid
    handleChooseMember(item.Member)
  }
  const list = JSON.parse(JSON.stringify(props.personalGroupList))
  const selectedIndex = list.findIndex((item) => item?.wxid === selectedId.value)
  if (selectedIndex !== -1) {
    const selected = list.splice(selectedIndex, 1)[0]
    tableDataO.splice(0, tableDataO.length, selected, ...list)
  } else {
    tableDataO.splice(0, tableDataO.length, ...list)
  }
}

// 选择群时弹窗
const handleOpenMemberModal = (record) => {
  if (record.wxid === props.currentGroup.wxid || props.disabledGroup.includes(record.wxid)) return
  memberModalRef.value?.openMemberModal(record, selectedId.value, compere.value)
}

// 清空选择监听
onMounted(() => {
  $bus.on('clearChoose2', (num) => {
    if (selectedId.value) {
      shouldUpdate.value = false
      selectedId.value = undefined
      memberModalRef.value?.clearChoose()
    }
  })
})

onUnmounted(() => {
  $bus.off('clearChoose2')
})

defineExpose({ handleEcho })
</script>
<style scoped>
.introduce {
  max-width: 300px;
}
.custom-radio-card {
  border: 1px solid var(--color-border-2);
  border-radius: 2px;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
}

.custom-radio-card-mask {
  height: 12px;
  width: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}

.custom-radio-card-title {
  color: var(--color-text-1);
  font-size: 12px;
}

.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked .custom-radio-card-mask {
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
</style>
